<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <editUser :type="type" :permissions="permissions" :userInfo="userInfo" v-if="show_Edit" @back="back"></editUser>
            <div :style="{ height: show_Edit ? 0 : 'auto', overflow: 'hidden' }">
                <div class="search-box">
                    <div class="search-user">
                        <el-input v-model="searchForm.key" class="search-input" placeholder="搜索关键字"
                            style="width: 300px;"></el-input>
                        <div class="search-btn" @click="clickSearch">查询</div>
                    </div>
                    <div class="create-btn" @click="createUser">
                        新建
                    </div>
                </div>
                <el-table :data="operationList" border tooltip-effect="dark"
                    style="width: 100%; height: calc(100vh - 280px);overflow: auto;">
                    <el-table-column prop="adminId" align="center" label="序号" width="100">
                    </el-table-column>
                    <el-table-column prop="name" align="center" label="员工姓名">
                    </el-table-column>
                    <el-table-column prop="sex" label="性别" align="center" width="160">
                        <template slot-scope="scope">
                            <div>{{ scope.row.sex == 0 ? "女" : scope.row.sex == 1 ? "男" : "" }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="position" align="center" label="职务">
                    </el-table-column>
                    <el-table-column prop="loginName" align="center" label="登录账号">
                    </el-table-column>
                    <el-table-column label="启用" align="center" width="160">
                        <template slot-scope="scope">
                            <div>{{ scope.row.isDel === 0 ? "已启用" : "已禁用" }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="120">
                        <template slot-scope="scope">
                            <div>
                                <el-button class="checkCard" @click="editUser(scope.row)" type="text" style="color: #51cdcb;"
                                    size="medium">编辑</el-button>
                                <el-button class="checkCard" v-if="scope.row.isDel === 0" @click="delUser(scope.row)"
                                    type="text" style="color: #FF5C6C;" size="medium">禁用</el-button>
                                <el-button class="checkCard" v-if="scope.row.isDel === 1" @click="delUser(scope.row)"
                                    type="text" style="color: #51cdcb;" size="medium">启用</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                        :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { selectAdminListApi, selectMenuListApi, delAdminApi } from "@/api/api.js";
import { setLocalStorage, getLocalStorage } from "@/utils/util.js";
export default {
    components: {
        editUser: () => import("@/components/edit-user.vue")
    },
    data() {
        return {
            userInfo: {
                userName: '',
                passWord: '',
                name: '',
                sex: 1,
                job: ''
            },
            permissions: [],
            show_Edit: false,
            type: '',
            searchForm: {
                key: ''
            },
            pageNum: 1,
            total: 0,
            operationList: []
        }
    },
    created() {
        this.selectAdminList();
        this.selectMenuList();
    },
    methods: {
        selectAdminList() {
            let params = {
                loginName: this.searchForm.key,
                pageNum: this.pageNum
            }
            selectAdminListApi(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    let operationList = res.data.pageInfo.list;
                    this.operationList = operationList;
                } else {
                    this.operationList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.operationList = [];
            })
        },
        selectMenuList() {
            selectMenuListApi().then(res => {
                this.getPermissions(res.data)
            })
        },
        clickSearch() {
            this.pageNum = 1;
            this.selectAdminList();
        },
        handleCurrentChange() {
            this.search();
        },
        createUser() {
            this.permissions = JSON.parse(getLocalStorage("allPermissions"));
            this.userInfo = {
                loginName: '',
                passWord: '',
                name: '',
                sex: 1,
                position: ''
            };
            this.type = "create";
            this.show_Edit = true;
        },
        editUser(data) {
            this.userInfo = {
                adminId: data.adminId,
                loginName: data.loginName,
                passWord: '',
                name: data.name,
                sex: data.sex,
                position: data.position
            };
            let allPermissions = JSON.parse(getLocalStorage("allPermissions"));
            allPermissions.map(item => {
                item.permissions.map(item2 => {
                    if (data.modelList) {
                        data.modelList.forEach(item3 => {
                            if (item2.menuId == item3.menuId) {
                                if (item.userpermissions.indexOf(item3.menuId) == -1) {
                                    item.userpermissions.push(item3.menuId);
                                }
                            }
                        });
                    }
                });
                if (item.permissions.length === item.userpermissions.length) {
                    item.checkAll = true;
                }
            });
            this.permissions = allPermissions;
            this.type = "edit";
            this.show_Edit = true;
        },
        delUser(item) {
            let params = {
                adminId: item.adminId,
                isDel: item.isDel === 0 ? 1 : 0
            };
            delAdminApi(params).then(res => {
                this.$message({
                    message: params.isDel === 1 ? "禁用成功，重新加载数据" : "启用成功，重新加载数据",
                    type: 'success'
                });
                this.selectAdminList();
            })
        },
        getPermissions(data) {
            let allPermissions = [];
            data.forEach(item => {
                let obj = {
                    name: item.value,
                    permissions: [],
                    menuId: item.menuId,
                    checkAll: false,
                    userpermissions: []
                }
                if (!item.menuModelList) {
                    let obj2 = {
                        name: item.value,
                        desc: item.adjective,
                        menuId: item.menuId
                    };
                    obj.permissions.push(obj2);
                } else {
                    item.menuModelList.forEach(item2 => {
                        let obj2 = {
                            name: item2.value,
                            desc: item2.adjective,
                            menuId: item2.menuId
                        };
                        obj.permissions.push(obj2);
                    });
                }
                allPermissions.push(obj)
            });
            setLocalStorage("allPermissions", JSON.stringify(allPermissions));
        },
        back(type) {
            this.show_Edit = false;
            if (type == "updata") {
                this.selectAdminList();
            }
        }
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .company-manager {
        padding: 0 20px;
        .search-box {
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .search-user {
                display: flex;
                .search-input {
                    height: 40px;
                    margin-right: 10px;
                    .el-input__inner {
                        height: 40px;
                    }
                }
                .search-btn {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
            .create-btn {
                border-radius: 4px;
                background: #51CDCB;
                font-size: 14px;
                line-height: 40px;
                height: 40px;
                color: #fff;
                padding: 0 20px;
                cursor: pointer;
            }
        }
        .page {
            background: #fff;
            padding: 10px 0;
            text-align: center;
        }
    }
}
</style>
